<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="hander">
			<view class="one">
				<view class="title">
					体验如何？
				</view>
			</view>
			<view class="two">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="demo-layout bg-purple" @click="tab(1,1)">
							<view class="">
								<view class="image">
									<image
										src="https://i.ringzle.com/file/20240103/4ac2d625822f4dbaaabb8e1c203982ef.png"
										mode="aspectFill" v-show="tabIndex ==1"></image>
									<image
										src="https://i.ringzle.com/file/20240102/4f0b74c2669b440a813ee351043a1479.png"
										mode="aspectFill" v-show="tabIndex !==1"></image>
								</view>
								<view class="text">
									较差
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light" @click="tab(2,3)">
							<view class="">
								<view class="image">
									<image
										src="https://i.ringzle.com/file/20240103/ad811364a9874d1b832eac5d802a667d.png"
										mode="aspectFill" v-show="tabIndex ==2"></image>
									<image
										src="https://i.ringzle.com/file/20240102/fa90c19d4783456e9fcd943a27afec03.png"
										mode="aspectFill" v-show="tabIndex !==2"></image>
								</view>
								<view class="text">
									体验一般
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-dark" @click="tab(3,5)">
							<view class="">
								<view class="image">
									<image
										src="https://i.ringzle.com/file/20240103/79cc8b2d35674193a37b060e005cadf1.png"
										mode="aspectFill" v-show="tabIndex ==3"></image>
									<image
										src="https://i.ringzle.com/file/20240102/5a73d439f4664f60a2a6ea130c08a70f.png"
										mode="aspectFill" v-show="tabIndex !==3"></image>
								</view>
								<view class="text">
									非常好
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="fromData.comment" placeholder="留下更有帮助性的评价吧！" border="none" height='332rpx'
				autoHeight='true' maxlength='-1'></u--textarea>
		</view>
		<view class="upload" v-if="fileList.length==0">
			<u-upload :fileList="fileList" multiple :maxCount="9" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
				@delete="deletePic" @oversize="overSize">
				<view class="upload-one">
					<image src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
						mode="aspectFill"></image>
				</view>
			</u-upload>
		</view>
		<view class="uploads" v-else>
			<u-upload :fileList="fileList" multiple :maxCount="9" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
				@delete="deletePic" @oversize="overSize">
				<view class="upload-image">
					<image src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
						mode="aspectFill"></image>
				</view>
			</u-upload>
		</view>
		<view class="texts">
			您的评价内容将会被匿名展示。
		</view>
		<view class="btn" @click="save">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "评价",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value5: '',
				tabIndex: null,
				fileList: [],
				picList: [],
				imageList: [],
				fromData: {
					comment: '', //内容
					imgUrlList: [], //上传的 照片
					guideId: '', //  接受的id  列表订单的 id
					userId: JSON.parse(wx.getStorageSync('userInfo')).id, // 评价用户id
					score: '', //评价选择
					orderCode: '', //订单编号
					sourceType: '', //评价来源(1景点 2酒店 3船票 4餐饮 5船+宿 6导游预订 7船+景 8宿+景 9:船票往返 10渔家乐 11智慧停车场 12小工市场）
				}
			}
		},
		onLoad(option) {
			console.log(JSON.parse(option.obj));
			let obj = JSON.parse(option.obj);
			this.fromData.guideId = obj.guideId;
			this.fromData.orderCode = obj.orderCode;
			this.fromData.sourceType = obj.sourceType;
		},
		methods: {

			// 选择
			tab(index, e) {
				this.tabIndex = index;
				this.fromData.score = e;
			},
			// 发布
			save() {
				if (!this.fromData.score) return this.$showToast('请选择评价');
				this.$api.detectionContent(this.fromData.comment).then(result => {
					if (result.code !== 0) return this.$showToast(result.msg);

					this.$api.post('/api/guide/userComment', this.fromData).then(res => {
						if (res.data.code === 0) {
							this.$showToast('评价成功');
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);
						} else this.$showModal(res.data.msg);
					})
				})


			},
			// 图片大小超出最大允许大小
			overSize(e) {
				uni.$u.toast('上传图片大小不能超过10MB!');
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let Lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				Lists.map((item) => {
					this.picList.push(
						item.url,
					)
				})

				for (let i = 0; i < Lists.length; i++) {
					const result = await this.uploadFilePromise(Lists[i].url);
					wx.getImageInfo({
						src: Lists[i].url,
						success: res => {
							this.fromData.imgUrlList.push(result)
						}
					})
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					this.$api.detectionContent(url, 2).then(result => {
						if (result.code === 0) {
							let a = uni.uploadFile({
								url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload',
								filePath: url,
								name: 'file',
								header: {
									token: wx.getStorageSync('access_token')
								},
								success: (res) => {
									let data = JSON.parse(res.data);
									this.fileList.push({
										url: data.data.url
									})
									resolve(data.data.url);
								}
							});
						} else this.$showToast(result.msg)
					})
				})
			},
		}
	}
</script>

<style lang="less">
	.uploads {
		.upload-image {
			width: 200rpx !important;
			height: 200rpx !important;
			margin: 15rpx !important;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.uploads {
		margin-top: 48rpx;

		// width: 200rpx;
		// height: 200rpx;
		.upload-ones {
			// margin: 32rpx auto 20rpx;
			margin: 0 auto;
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			background-color: #F5F8FA;

			.image {
				margin: 32rpx auto 20rpx !important;
				width: 72rpx;
				height: 72rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.u-upload__deletable {
		.u-icon__icon {
			font-size: 20rpx !important;
			top: 7rpx !important;
		}
	}

	// .u-icon__icon {
	// 	font-size: 20rpx;
	// 	top
	// }
	.u-upload__button {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.u-upload__wrap__preview__image {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.u-upload__wrap__preview {
		margin: 15rpx !important;
	}

	.u-textarea {
		height: 332rpx !important;
	}

	.u-textarea__field {
		height: 332rpx !important;
	}
</style>

<style lang="scss">
	.page {
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 190rpx;

		.hander {
			.one {
				.title {
					font-size: 36rpx;
					color: #111111;
					margin-top: 30rpx;
					font-weight: bold;
					line-height: 50rpx;
				}
			}

			.two {
				margin-top: 28rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.demo-layout {
					width: 230rpx;
					display: flex;
					text-align: center;
					align-items: center;

					.image {
						margin: 20rpx 75rpx;
						width: 80rpx;
						height: 80rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						margin: 20rpx 0rpx;
						// width: 230rpx;
						font-size: 28rpx;
						color: #88919D;
						font-weight: Regular;
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
			height: 332rpx;
		}

		.upload {
			margin-top: 48rpx;
			width: 100%;
			height: 200rpx;
			border-radius: 16rpx;
			background-color: #F5F8FA;
			display: flex;
			align-items: center;
			text-align: center;

			.upload-one {
				margin: 0 245rpx;
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.texts {
			// padding-bottom: 200rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
			color: #88919D;
			font-weight: Regular;
		}

		.btn {
			text-align: center;
			margin: 0 auto;
			position: fixed;
			width: 700rpx;
			font-weight: bold;
			bottom: 64rpx;
			line-height: 88rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx;
			background-color: #007A69;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>